<template>
  <div style="padding:0px 8px">
    <el-card class="configContainer" style="height: 100%;">
      <div style="display: flex;flex-direction: row;align-items: center">
        <h4 class="card-title"> 规则管理 </h4>
        <div class="space"/>
        <el-button type="primary" @click="showAdd">新增规则</el-button>
      </div>
      <el-divider/>
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">

        <el-form-item label="" class="ml_5">
          <el-select @change="changeYear(searchForm.year)" v-model="searchForm.year" placeholder="请选择年级">
            <el-option label="7年级" :value="1"/>
            <el-option label="8年级" :value="2"/>
            <el-option label="9年级" :value="3"/>
          </el-select>
        </el-form-item>

        <el-form-item label="" class="ml_5">
          <el-select v-model="searchForm.subId" @change="changeSub" placeholder="大项">
            <el-option v-for="item in subList" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item label="" class="ml_5">
          <el-select v-model="searchForm.subItemId" placeholder="小项">
            <el-option v-for="item in subItemList" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>

        <el-form-item class="ml_5">
          <el-select v-model="searchForm.sexType" placeholder="请选择性别">
            <el-option label="男" :value="1"/>
            <el-option label="女" :value="2"/>
            <el-option label="通用" :value="0"/>
          </el-select>
        </el-form-item>

        <el-form-item label="">
          <el-input v-model="rawScore" placeholder="请输入输入分数"/>
        </el-form-item>
        <el-form-item class="ml_5">
          <el-button type="primary" @click="load">
            搜索
          </el-button>
          <el-button type="success" @click="measure">
            计算
          </el-button>
          <el-button @click="reset()">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table height="400px" :header-cell-style="{background:'#f8f8f8',height:'40px',color:'#2b2b2b'}"
                :data="scoreRuleList" style="width: 100%;margin-top: 16px;"
                @selection-change="handleSelectionChange">
        <!--          <el-table-column type="selection" width="55"/>-->
        <el-table-column fixed prop="id" label="id" width="120">
        </el-table-column>
        <el-table-column fixed prop="subjectName" label="大项">
        </el-table-column>

        <el-table-column fixed prop="itemName" label="小项">
        </el-table-column>


        <el-table-column prop="rawScore" label="原始分数">
          <template #default="scope">
              <span class="rawScore">
                {{ scope.row.rawScore }}
              </span>
          </template>
        </el-table-column>


        <el-table-column prop="convScore" label="对应分数">
          <template #default="scope">
              <span class="convScore">
                {{ scope.row.convScore }}
              </span>
          </template>
        </el-table-column>

        <el-table-column prop="unit" label="分数单位">
          <template #default="scope">
              <span>
                {{ scope.row.unit }}
              </span>
          </template>
        </el-table-column>
        <el-table-column prop="year" label="年级" width="150">
          <template #default="scope">
            <el-tag v-if="scope.row.year == 1" type="success">七年级</el-tag>
            <el-tag v-else-if="scope.row.year == 2" type="primary">八年级</el-tag>
            <el-tag v-else-if="scope.row.year == 3" type="danger">九年级</el-tag>
            <el-tag v-else="" type="warning">未知</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="sexType" label="性别" width="120">
          <template #default="scope">
            <span v-show="scope.row.sexType == 1">男</span>
            <span v-show="scope.row.sexType == 2">女</span>
            <span v-show="scope.row.sexType == 0">通用</span>
          </template>
        </el-table-column>
        <el-table-column prop="scoreType" label="成绩类型" width="120">
          <template #default="scope">
            <span v-show="scope.row.scoreType == 1">越大越好</span>
            <span v-show="scope.row.scoreType == 2">越小越好</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="zip" label="Zip" width="120" /> -->
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="showScoreRule(scope.row)">
              <el-icon>
                <Edit/>
              </el-icon>
              编辑
            </el-button>
            <el-popconfirm title="确认删除吗?" @confirm="delRule(scope.row.id)">
              <template #reference>
                <el-button link type="danger" size="small">
                  <el-icon>
                    <Delete/>
                  </el-icon>
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :page-sizes="[10, 20, 50, 100]"
          :page-count="pagecount"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="currentChange"
          style="margin-top: 16px;width: 100%;display: flex;align-items: center;justify-content: center;"
          background layout="total, sizes, prev, pager, next, jumper"/>
    </el-card>
  </div>


  <el-dialog v-model="dialogVisible" title="规则更改" center>
    <el-form ref="edit" :rules="editRules" :model="scoreRule">
      <el-form-item label="年级" label-width="100px">
        <el-select disabled v-model="scoreRule.year" placeholder="请选择年级"
                   style="width:100%">
          <el-option label="7年级" :value="1"/>
          <el-option label="8年级" :value="2"/>
          <el-option label="9年级" :value="3"/>
        </el-select>
      </el-form-item>

      <el-form-item label="大项" label-width="100px">
        <el-input disabled v-model="scoreRule.subjectName" style="width:100%"></el-input>
      </el-form-item>

      <el-form-item label="小项" label-width="100px">
        <el-input disabled v-model="scoreRule.itemName" style="width:100%"></el-input>
      </el-form-item>

      <el-form-item prop="sexType" label="性别" label-width="100px">
        <el-select v-model="scoreRule.sexType" placeholder="请选择性别" style="width:100%">
          <el-option label="男" :value="1"/>
          <el-option label="女" :value="2"/>
          <el-option label="通用" :value="0"/>
        </el-select>
      </el-form-item>

      <el-form-item prop="rawScore" label="原始分数" label-width="100px">
        <el-input v-model="scoreRule.rawScore" placeholder="请输入原始分数"/>
      </el-form-item>

      <el-form-item prop="convScore" label="对应分数" label-width="100px">
        <el-input type="number" v-model="scoreRule.convScore" placeholder="请输入对应分数"/>
      </el-form-item>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="updateScoreRule()">确定</el-button>
            </span>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogVisible_add" title="添加规则" center>
    <el-form ref="add" :rules="addRules" :model="addScoreRule">
      <el-form-item prop="year" label="年级" label-width="100px">
        <el-select @change="changeYear(addScoreRule.year)" v-model="addScoreRule.year" placeholder="请选择年级"
                   style="width:100%">
          <el-option label="7年级" :value="1"/>
          <el-option label="8年级" :value="2"/>
          <el-option label="9年级" :value="3"/>
        </el-select>
      </el-form-item>

      <el-form-item prop="subId" label="大项" label-width="100px">
        <el-select v-model="addScoreRule.subId" @change="changeSub" placeholder="大项" style="width:100%">
          <el-option v-for="item in subList" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>

      <el-form-item prop="subItemId" label="小项" label-width="100px">
        <el-select v-model="addScoreRule.subItemId" placeholder="小项" style="width:100%">
          <el-option v-for="item in subItemList" :label="item.name" :value="item.id"/>
        </el-select>
      </el-form-item>

      <el-form-item prop="sexType" label="性别" label-width="100px">
        <el-select v-model="addScoreRule.sexType" placeholder="请选择性别" style="width:100%">
          <el-option label="男" :value="1"/>
          <el-option label="女" :value="2"/>
          <el-option label="通用" :value="0"/>
        </el-select>
      </el-form-item>

      <el-form-item prop="rawScore" label="原始分数" label-width="100px">
        <el-input v-model="addScoreRule.rawScore" placeholder="请输入原始分数"/>
      </el-form-item>

      <el-form-item prop="convScore" label="对应分数" label-width="100px">
        <el-input type="number" v-model="addScoreRule.convScore" placeholder="请输入对应分数"/>
      </el-form-item>
    </el-form>
    <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible_add = false">取消</el-button>
                <el-button type="primary" @click="addScoreRole()">确定</el-button>
            </span>
    </template>
  </el-dialog>
  <CompanyText/>
</template>


<script>
import CompanyText from "../../../components/CompanyText.vue";

export default {
  name: 'IndexPage',
  props: {
    // msg: String
  },
  components: {
    CompanyText
  },
  data() {
    return {
      subItemList: [],
      subList: [],
      searchForm: {},
      dialogVisible_add: false,
      scoreRuleList: [],
      current: 1,
      pagecount: 0,
      rawScore: '',
      addRules: {
        year: [{required: true, message: "年级必选", trigger: ['change'], type: 'number'},],
        subId: [{required: true, message: "大项必选", trigger: ['change'], type: 'number'},],
        subItemId: [{required: true, message: "小项必选", trigger: ['change'], type: 'number'},],
        sexType: [{required: true, message: "性别必选", trigger: ['change'], type: 'number'},],
        rawScore: [{required: true, message: "原始分数必填", tirgger: blur},],
        convScore: [{required: true, message: "对应分数必填", tirgger: blur},],
      },
      editRules: {
        year: [{required: true, message: "年级必选", trigger: ['change'], type: 'number'},],
        subId: [{required: true, message: "大项必选", trigger: ['change'], type: 'number'},],
        subItemId: [{required: true, message: "小项必选", trigger: ['change'], type: 'number'},],
        sexType: [{required: true, message: "性别必选", trigger: ['change'], type: 'number'},],
        rawScore: [{required: true, message: "原始分数必填", tirgger: blur},],
        convScore: [{required: true, message: "对应分数必填", tirgger: blur, type: 'number'},],
      },
      multipleSelection: [],
      dialogVisible: false,
      uploadDialogVisible: false,
      scoreRule: {},
      addScoreRule: {}
    }
  },
  created() {
    this.load();
  },

  methods: {
    changeYear(year) {
      let that = this;
      this.$http.post('/subject/getSubjectList', {
        year: year
      }).then(function (res) {
        if (res.code === 0) {
          console.log('success');
          that.addScoreRule.subId = null
          that.addScoreRule.subItemId = null
          that.subList = res.data;
        }
      }).catch(function (error) {
        console.log('error');
      });
    },
    changeSub(value) {
      console.info(value)
      this.addScoreRule.subItemId = null
      this.subItemList = this.subList.find(function (item) {
        return item.id === value;
      })?.subItemList;
    },
    delRule(id) {
      console.info(id)
      let that = this;
      this.$http.post('/scoreRule/delScoreRoleById/', {id: id}).then(function (res) {
        if (res.code === 0) {
          console.log('success');
          that.$message.success(res.userMsg)
          that.load();
        }

      }).catch(function (error) {
        console.log('error');
      });
    },
    reset() {
      this.searchForm = {}
      this.load();
    },
    measure() {
      let that = this;
      if (that.searchForm.subItemId == null) {
        that.$message.warning("选择小项后重试！")
        return;
      }
      if (that.searchForm.sexType == null) {
        that.$message.warning("选择性别后重试！")
        return;
      }
      let data = new FormData();
      data.set("sex", that.searchForm.sexType)
      data.set("rawScore", that.rawScore)
      data.set("subItemId", that.searchForm.subItemId)
      this.$http.post('/scoreRule/getScoreByRawScore',
          data).then(function (res) {
        if (res.code === 0) {
          that.$message.success("得分:" + res.data.convScore)
        }
        console.info(res.data)
      }).catch(function (error) {
        console.log('error');
      });
    },
    showAdd() {
      this.dialogVisible_add = true;
    },
    addScoreRole() {
      let that = this;
      this.$refs.add.validate((valid, fields) => {
        if (valid) {
          this.$http.post('/scoreRule/addScoreRole', that.addScoreRule).then(function (res) {
            if (res.code === 0) {
              console.log('success');
              that.$message.success(res.userMsg)
              that.dialogVisible_add = false;
              that.load();
              that.addScoreRule = {}
              that.$refs.add.resetFields();
            }
          }).catch(function (error) {
            console.log('error');
          });
        }
      })
    },
    updateScoreRule() {
      let that = this;
      this.$refs.edit.validate((valid, fields) => {
        if (valid) {
          this.$http.post('/scoreRule/updateScoreRoleById', this.scoreRule).then(function (res) {
            if (res.code === 0) {
              console.log('success');
              that.$message.success(res.userMsg)
              that.dialogVisible = false;
              that.load();
              that.$refs.edit.resetFields();
            }
          }).catch(function (error) {
            console.log('error');
          });
        }
      })
    },
    showScoreRule(item) {
      this.dialogVisible = true;
      Object.assign(this.scoreRule, item)
      console.log(this.scoreRule)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    editStuInfo() {
      this.dialogVisible = true;
    },
    load() {
      let that = this;
      this.$http.post('/scoreRule/page', that.searchForm).then(function (response) {
        console.log('success' + response);
        that.scoreRuleList = response.data.records;
        that.pagecount = response.data.pages;
        that.total = response.data.total;
        that.current = response.data.current;
      }).catch(function (error) {
        console.log('error');
      });
    },
    currentChange(current) {
      this.searchForm.current = current;
      console.info(this.current)
      this.load();
    },
    handleSizeChange(size) {
      this.searchForm.size = size;
      console.info(this.size)
      this.load();
    },
  }

}
</script>

<style scoped>


.media .el-icon {
  color: white;
}

h3 {
  padding: 0;
  margin: 0;
}

.convScore {
  color: #4999ff;
}

.rawScore {
  color: #ff497d;
}

.configContainer {
  margin: 10px 8px;
  padding: 0px;
  /* border: red 1px solid; */
}
</style>
